<template>
<el-dialog
    :title="$t('plus.add_miniapp_product')"
    :modal-append-to-body="false"
    :before-close="closeFunc"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="500px"
  >
    <el-form
      size="small"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item :label="$t('plus.product_name')" prop="name"
        ><el-input v-model="ruleForm.name"></el-input
      ></el-form-item>

      <el-form-item :label="$t('plus.product_cover')" prop="coverImgId">
        <div>
          <el-button type="primary" @click="openUpload('cover')"
            >{{$t('plus.upload_image_button')}}</el-button
          >
          <img
            :src="ruleForm.coverImgPath"
            class="mt10"
            width="120px;"
            v-if="ruleForm.coverImgId != ''"
          />
          <div class="gray9">{{$t('plus.image_tip_300')}}</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >{{$t('plus.upload_image_button')}}</Upload
          >
        </div>
      </el-form-item>

      <el-form-item :label="$t('plus.price_type')" prop="type">
        <el-radio-group v-model="ruleForm.priceType">
          <el-radio :label="1">{{$t('plus.fixed_price')}}</el-radio>
          <el-radio :label="2">{{$t('plus.price_range')}}</el-radio>
          <el-radio :label="3">{{$t('plus.discount_price')}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('plus.price_label')" v-if="ruleForm.priceType == 1">
        <el-input
          type="textarea"
          min="0"
          v-model="ruleForm.price"
          class="mb16 max-w460"
          :placeholder="$t('plus.input_price')"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('plus.price_label')" v-if="ruleForm.priceType == 2">
        <el-input
          type="textarea"
          min="0"
          v-model="ruleForm.price"
          class="mb16 max-w460"
          :placeholder="$t('plus.input_min_price')"
          prop="price"
          :rules="[{  required: true,  message: $t('plus.input_min_price'),  trigger: 'change'}]"


        ></el-input>
        <el-input
          type="textarea"
          min="0"
          v-model="ruleForm.price2"
          class="mb16 max-w460"
          :placeholder="$t('plus.input_max_price')"
          :rules="[{  required: true,  message: $t('plus.input_max_price'),  trigger: 'change'}]"


        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('plus.price_label')" v-if="ruleForm.priceType == 3">
        <el-input
          type="textarea"
          min="0"
          v-model="ruleForm.price"
          class="mb16 max-w460"
          :placeholder="$t('plus.input_original_price')"
          :rules="[{  required: true,  message: $t('plus.input_original_price'),  trigger: 'change'}]"


        ></el-input>
        <el-input
          type="textarea"
          min="0"
          v-model="ruleForm.price2"
          class="mb16 max-w460"
          :placeholder="$t('plus.input_current_price')"
          :rules="[{  required: true,  message: $t('plus.input_current_price'),  trigger: 'change'}]"


        ></el-input>
      </el-form-item>

      <el-form-item
        ><el-button @click="openProduct()">{{$t('plus.bind_product')}}</el-button></el-form-item
      >
      <el-form-item v-if="ruleForm.productId != ''">{{ruleForm.productName}}

</el-form-item>
      <el-form-item
        ><img
          :src="ruleForm.productImgPath"
          class="mt10"
          width="120px;"
          v-if="ruleForm.productImgId != ''"
      /></el-form-item>
      <el-form-item :label="$t('plus.review')" prop="type">
        <el-radio-group v-model="ruleForm.plateAuditStatus">
          <el-radio :label="10">{{$t('plus.approved_status')}}</el-radio>
          <el-radio :label="20">{{$t('plus.reject')}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="closeFunc">{{$t('plus.cancel')}}</el-button>
        <el-button @click="resetForm('ruleForm')">{{$t('plus.reset')}}</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          :loading="loading"
          >{{$t('plus.review')}}</el-button
        >
      </div>
    </template>
    <!--商品选择-->
    <Product
      :isProduct="isproduct"
      :excludeIds="exclude_ids"
      :islist="false"
      @closeDialog="closeProductFunc"
    ></Product>
  </el-dialog>
</template>

<script>
import Upload from "@/components/file/Upload.vue";
import Product from "@/components/product/Product.vue";
import LiveApi from "@/api/live.js";
export default {
  components: {
    /*图片上传*/
    Upload: Upload,
    /*选择商品*/
    Product: Product
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      coverImgPath: "",
      shareImgPath: "",
      feedsImgPath: "",
      productImgPath: "",
      productName: "",
      rules: {
        name: [{
          required: true,
          message: $t("plus.input_product_name"),
          trigger: "blur"
        }, {
          min: 3,
          max: 17,
          message: $t("plus.length_3_17_chars"),
          trigger: "blur"
        }],
        price: [{
          required: true,
          message: $t("plus.input_price"),
          trigger: "change"
        }]
      },
      /*是否加载完成*/
      loading: false,
      /*是否打开选择商品*/
      isproduct: false,
      /*已有的id*/
      exclude_ids: [],
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false
    };
  },
  props: ["open", "ruleForm"],
  watch: {
    open: function (n, o) {
      if (n != o) {
        this.dialogVisible = n;
      }
    }
  },
  created() {},
  methods: {
    closeFunc() {
      this.$emit("close");
    },
    submitForm(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let param = self.ruleForm;
          LiveApi.audit(param).then(data => {
            ElMessage({
              message: $t("plus.submit_success"),
              type: "success"
            });
            this.dialogVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit("close", {
          type: "success",
          openDialog: false
        });
      } else {
        this.$emit("close", {
          type: "error",
          openDialog: false
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*关闭商品选择*/
    closeProductFunc(e) {
      this.ruleForm.productId = e.params.productId;
      this.ruleForm.productImgPath = e.params.imagePath;
      this.ruleForm.productName = e.params.productName;
      this.isproduct = false;
    },
    /*关闭弹窗*/
    cancelFunc(e) {
      this.$emit("close", {
        type: "error"
      });
    },
    /*打开添加*/
    openProduct() {
      this.isproduct = true;
    },
    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: $t("plus.file_uploading"),
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      LiveApi.uploadFile({
        fileId
      }, err => {
        loading.close();
      }).then(response => {
        loading.close();
        ElMessage({
          message: $t("plus.upload_success_wechat"),
          type: "success"
        });
      }).catch(response => {
        loading.close();
      });
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.ruleForm.coverImgPath = e[0].filePath;
        this.ruleForm.coverImgId = e[0].fileId;
        this.uploadFile(this.ruleForm.coverImgId);
      }
      this.isupload = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.img {
  margin-top: 10px;
}
</style>

